<template>
  <div class="page-list-live">
    <PageList>
      <template #header>设备图像设置</template>
      <template #filter>
        <el-form ref="RefForm" label-width="auto" :validate-on-rule-change="false" status-icon>
          <el-form-item class="wid" label="基站图像">
            <div class="box">
              <deviceImageSettings :url="formData[0].value" @inputChange="baseStationChange"></deviceImageSettings>
              <div class="boxOne">
                <span :class="getMessage[0].value ? 'red' : 'lime'">{{ getMessage[0].label }}</span>
                <span :class="errMessage[0].value ? 'red' : 'lime'">{{ errMessage[0].label }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="wid" label="监控图像">
            <div class="box">
              <deviceImageSettings :url="formData[1].value" @inputChange="monitorChange"></deviceImageSettings>
              <div class="boxOne">
                <span :class="getMessage[1].value ? 'red' : 'lime'">{{ getMessage[1].label }}</span>
                <span :class="errMessage[1].value ? 'red' : 'lime'">{{ errMessage[1].label }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="wid" label="施工人员图像">
            <div class="box">
              <deviceImageSettings :url="formData[2].value" @inputChange="peopleChange"></deviceImageSettings>
              <div class="boxOne">
                <span :class="getMessage[2].value ? 'red' : 'lime'">{{ getMessage[2].label }}</span>
                <span :class="errMessage[2].value ? 'red' : 'lime'">{{ errMessage[2].label }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="wid" label="车辆图像" prop="latitude">
            <div class="box">
              <deviceImageSettings :url="formData[3].value" @inputChange="carChange"></deviceImageSettings>
              <div class="boxOne">
                <span :class="getMessage[3].value ? 'red' : 'lime'">{{ getMessage[3].label }}</span>
                <span :class="errMessage[3].value ? 'red' : 'lime'">{{ errMessage[3].label }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="wid" label="环境监测图像" prop="latitude">
            <div class="box">
              <deviceImageSettings :url="formData[4].value" @inputChange="AccessControlChange"></deviceImageSettings>
              <div class="boxOne">
                <span :class="getMessage[4].value ? 'red' : 'lime'">{{ getMessage[4].label }}</span>
                <span :class="errMessage[4].value ? 'red' : 'lime'">{{ errMessage[4].label }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import { assetsImages } from '@/utils/images.js'
  import listMixin from '@/mixins/list'
  import { eleValidator } from '@/utils/tools'
  import { parameter } from '@/api/api'
  import deviceImageSettings from './components/deviceImageSettings.vue'
  export default {
    components: {
      deviceImageSettings
    },
    mixins: [listMixin],
    data() {
      return {
        id: null,
        // 表单数据
        formData: [
          { label: '基站', name: 'BaseStationImage', value: '', id: null }, // 基站
          { label: '监控', name: 'MonitorImage', value: '', id: null }, // 监控
          { label: '人员', name: 'PeopleImage', value: '', id: null }, // 人员
          { label: '车辆', name: 'CarImage', value: '', id: null }, // 车辆
          { label: '环境监测', name: 'AccessControlImage', value: '', id: null } // 环境监测
        ],
        // 第一行错误提示
        getMessage: [
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false }
        ],
        // 第二行错误提示
        errMessage: [
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false },
          { label: '', value: false }
        ],

        listData: [],
        loadingSubmit: false
      }
    },
    mounted() {
      this.getTunnelData()
    },
    methods: {
      // 上传基站图像
      baseStationChange(url) {
        this.formData[0].value = url
      },
      // 上传监控图像
      monitorChange(url) {
        this.formData[1].value = url
      },
      // 上传车辆图像
      carChange(url) {
        this.formData[3].value = url
      },
      // 上传人员图像
      peopleChange(url) {
        this.formData[2].value = url
      },
      // 上传环境监测图像
      AccessControlChange(url) {
        this.formData[4].value = url
      },
      // 保存
      async handleSubmit() {
        this.loadingSubmit = true
        let res
        try {
          res = await Promise.allSettled([
            parameter('put', { name: this.formData[0].name, value: this.formData[0].value, id: this.formData[0].id }),
            parameter('put', { name: this.formData[1].name, value: this.formData[1].value, id: this.formData[1].id }),
            parameter('put', { name: this.formData[2].name, value: this.formData[2].value, id: this.formData[2].id }),
            parameter('put', { name: this.formData[3].name, value: this.formData[3].value, id: this.formData[3].id }),
            parameter('put', { name: this.formData[4].name, value: this.formData[4].value, id: this.formData[4].id })
          ])
          // res = await Promise.allSettled([
          //   parameter('put', { name: this.formData[0].name, value: '', id: this.formData[0].id }),
          //   parameter('put', { name: this.formData[1].name, value: '', id: this.formData[1].id }),
          //   parameter('put', { name: this.formData[2].name, value: '', id: this.formData[2].id }),
          //   parameter('put', { name: this.formData[3].name, value: '', id: this.formData[3].id }),
          //   parameter('put', { name: this.formData[4].name, value: '', id: this.formData[4].id })
          // ])
          res.forEach((item, index) => {
            if (item.status === 'rejected') {
              this.errMessage[index] = {
                label: this.formData[index].label + '保存失败',
                value: true
              }
            } else {
              this.errMessage[index] = {
                label: this.formData[index].label + '保存成功',
                value: false
              }
            }
          })
          this.getTunnelData()
          this.loadingSubmit = false
        } catch (err) {
          this.loadingSubmit = false
        }
      },
      // 获取数据
      async getTunnelData() {
        try {
          let response = await Promise.allSettled([
            parameter('get', { parameterName: 'BaseStationImage' }),
            parameter('get', { parameterName: 'MonitorImage' }),
            parameter('get', { parameterName: 'PeopleImage' }),
            parameter('get', { parameterName: 'CarImage' }),
            parameter('get', { parameterName: 'AccessControlImage' })
          ])
          // response.forEach((res, index) => {
          //   if (res.status === 'rejected') {
          //     this.formData[index].id = 0
          //     this.getMessage[index] = {
          //       label: this.formData[index].label + '获取失败',
          //       value: true
          //     }
          //   } else {
          //     this.formData.forEach(edit => {
          //       let obj = res.value.data
          //       if (edit.name === obj.name) {
          //         edit.value = obj.value
          //         edit.id = obj.id
          //       }
          //     })
          //     this.getMessage[index] = {
          //       label: this.formData[index].label + '获取成功',
          //       value: false
          //     }
          //   }
          // })
        } catch (err) {
          let er = err
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wid {
    width: 330px;
  }
  .box {
    display: flex;
    align-items: center;
  }
  .boxOne {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    justify-content: space-between;
  }
  .red {
    color: red;
  }
  .lime {
    color: lime;
  }
</style>
